<template>
    <!-- -->
    <el-dialog v-model="show" title="半成品生产工单" align-center width="80%" @close="handleClose" :show-close="false"
        :close-on-click-modal="false">
        <table class="order-table ">
            <tr v-for="(item, index) in tableData" :key="index">
                <td v-for="(sonItem, sonIndex) in item" :key="sonIndex" @click="handleClick(index, sonIndex)">{{ sonItem
                    }}</td>
            </tr>
        </table>

        <el-row :gutter="10" class="mt20">
            <el-col :span="9">
                <el-card>
                    <template #header>
                        <div style="text-align: center;">
                            <span>半成品图片</span>
                        </div>
                    </template>
                    <div style="display: flex; justify-content: center; align-items: center;">
                        <img style="width: 300px; height: 300px;"
                            src="https://plus.unsplash.com/premium_photo-1725708358944-844db020a73a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                            alt="">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="9">
                <el-card>
                    <template #header>
                        <div style="text-align: center;">
                            <span>半成品相关信息</span>
                        </div>
                    </template>
                    <el-row :gutter="10" class="elRowBootom">
                        <el-col :span="24">半成品名：CAKE A款不锈钢封皮</el-col>
                        <el-col :span="12">纸张信息：350g*889mm*500mm</el-col>
                        <el-col :span="12">制单日期：2023-12-17</el-col>
                        <el-col :span="12"> 纸张数量：10000</el-col>
                        <el-col :span="12"> 交付日期：2023-12-27</el-col>
                        <el-col :span="12">刀版信息：HJF002号刀版</el-col>
                        <el-col :span="12">生产数量：10000</el-col>
                        <el-col :span="12">能切套数：1</el-col>
                        <el-col :span="12">当前位置：张超</el-col>
                        <el-col :span="24" style="display: flex; justify-content: center;">
                            <img style="width: 80%; height: 50px;" src="@/assets/images/baojia.png" alt="">
                        </el-col>
                        <el-col :span="24"
                            style="display: flex; justify-content: center; color: #0F83F0;">F23000123-2</el-col>

                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <template #header>
                        <div style="text-align: center;">
                            <span>用时12天</span>
                        </div>
                    </template>
                    <div style="height: 300px; overflow-y: auto;">
                        <div class="mb4 mr4" style="border-bottom: 1px solid #F4F4F4; padding-bottom: 4px;"
                            v-for="item in 10" :key="item">
                            <div style="color: #000000;">三强：印刷完成</div>
                            <div class="mt10"
                                style="display: flex; align-items: center; justify-content: space-between;color: #A6A5A5;">
                                <div>
                                    2024-07-1512:40
                                </div>
                                <div>
                                    操作人：三强
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 工序录入 -->
    <ProcessInput :visible="processInputShow" @close="processInputShow = false" />
    <!-- 部件入库 -->
    <ComponentStorage :visible="componentStorageShow" @close="componentStorageShow = false" />
</template>

<script setup lang="ts">
import ProcessInput from './processInput.vue'
import ComponentStorage from './componentStorage.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const tableData = ref([
    ['工序项目', '纸张采购', '印刷', '覆膜', '烫金', '冷烫', '模切', '糊盒', '入库'],
    ['流程', 1, 1, 1, 2, 3, 3, 3, 3],
    ['供应商', '兴店', '兴店', '兴店', '兴店', '兴店', '兴店', '兴店', '兴店'],
    ['计划用时', '2', '3', '3', '3', '3', '3', '3', '3'],
    ['实际用时', '2', '3', '3', '3', '3', '3', '3', '3'],
])

const processInputShow = ref(false);
const componentStorageShow = ref(false);

const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};

const handleClick = (index: number, sonIndex: number) => {
    if (index === 1 && sonIndex !== 8) {
        processInputShow.value = true;
    }

    if (index === 1 && sonIndex === 8) {
        componentStorageShow.value = true;
    }
}

const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.order-table {
    border-spacing: 0;
    border: 0.5px solid #EBEEF5;
    width: 100%;
    // font-size: 20px;

    tr {
        border: 1px solid #EBEEF5;
    }

    td:not(.step-col) {
        border: 0.5px solid #EBEEF5;
        text-align: center;
    }

    .step-col {
        border: 0.5px solid #EBEEF5;
        padding: 10px 10px 0 10px;
    }
}


.elRowBootom {
    .el-col {
        margin-bottom: 20px;
    }
}
</style>